<template>
	<div class="dinner-detail-container">
		<!-- 正餐优选头部，包含标题和元数据 -->
		<div class="dinner-header">
			<h1 class="dinner-detail-title">{{ dinner.title }}</h1>
			<div class="dinner-meta">
				<span class="dinner-source">来源: {{ dinner.source }}</span>
				<span class="dinner-date">发布时间: {{ dinner.publishDate }}</span>
			</div>
		</div>
		<!-- 正餐优选内容区域 -->
		<div class="dinner-content">
			<p class="dinner-detail-content">{{ dinner.content }}</p>
		</div>
		<!-- 返回正餐优选列表的导航链接、收藏按钮和点赞按钮 -->
		<div class="action-buttons">
			<router-link to="/dinnerList" class="back-button">返回正餐优选列表</router-link>
			<div class="right-buttons">
				<van-button type="primary" size="big" @click="onClickAddMyFavorites" :loading="isAddingToLike"
					:class="{ 'favorite-button':!isFavorited, 'favorite-button-active': isFavorited }">
					{{ isAddingToLike? '正在加入...' : (isFavorited? '已收藏' : '加入收藏') }}
				</van-button>
				<van-button type="primary" size="big" @click="onClickLike" :loading="isLiking"
					:class="{ 'like-button':!isLiked, 'like-button-active': isLiked }">
					{{ isLiking? '正在点赞...' : (isLiked? '已点赞' : '点赞') }}
				</van-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant';

	export default {
		data() {
			return {
				dinner: {}, // 初始化为空对象，后续根据id从数组中获取具体正餐优选
				isAddingToLike: false, // 是否正在添加收藏
				isFavorited: false, // 是否已收藏
				isLiked: false, // 是否已点赞
				isLiking: false, // 是否正在点赞
			};
		},
		created() {
			// 获取当前路由参数中的id
			const id = this.$route.params.id;
			// 模拟的正餐优选列表数据，实际项目中应从合适的数据源获取（如API、Vuex等）
			const dinnerList = [{
					id: 1,
					title: "时令鲜蔬匠心烹制的田园风味正餐热推",
					summary: "餐厅推出时令鲜蔬主题正餐，以当季新鲜食材为核心，打造原汁原味的田园风味美食。",
					content: "近日，多家餐厅抓住时令契机，推出以鲜蔬为主角的田园风味正餐。大厨精选当季本地直供的新鲜蔬菜，如脆嫩的芦笋、清甜的春笋、鲜嫩的菠菜等，搭配传统烹饪手法，推出清炒时蔬、蔬菜浓汤、蔬菜沙拉等多款菜品。同时，为满足不同食客需求，还将鲜蔬与肉类、海鲜巧妙搭配，推出特色荤素融合菜肴。这种以时令为灵感、以鲜蔬为亮点的正餐，既保证了食材的新鲜度与营养，又让食客品尝到大自然的馈赠，受到众多健康饮食爱好者的喜爱。",
					source: "美食风尚报 ",
					publishDate: "2025-05-01",
				},
				{
					id: 2,
					title: "老字号传承的经典正餐套餐焕新上市",
					summary: "老字号餐饮品牌推出经典焕新正餐套餐，在传统味道中融入创新元素，重温记忆中的美味。",
					content: "为传承经典美食文化，多家老字号餐饮品牌推出经典正餐套餐。套餐中不仅保留了招牌名菜，如老字号的秘制红烧肉、手工灌汤包、传统酱鸭等，还在食材搭配、摆盘造型上进行创新升级。例如，将红烧肉与时令水果搭配，既解腻又增添清新口感；灌汤包采用创意造型，让人眼前一亮。此外，套餐还搭配老字号特色小吃，让食客一次品尝到多种经典美味。这种在传承中创新的正餐套餐，既满足了老顾客对传统味道的怀念，也吸引了年轻食客的关注。",
					source: "文旅美食探索 ",
					publishDate: "2025-05-02",
				},
				{
					id: 3,
					title: "地方特色风味的主题正餐之旅开启",
					summary: "美食街区推出地方特色风味主题正餐，汇聚各地经典菜肴，带食客领略舌尖上的地域风情。",
					content: "美食街区打造地方特色风味主题正餐活动，集结了川、湘、粤、苏等多个地域的特色美食。在这里，食客可以品尝到正宗的四川麻辣火锅、湖南剁椒鱼头、广东白切鸡、江苏松鼠鳜鱼等经典菜肴。每道菜品均由当地厨师主理，采用原产地食材，严格遵循传统烹饪工艺，还原地道风味。此外，街区还设置了地域文化展示区，用餐的同时还能了解各地饮食文化，让食客在一场正餐中，完成一次舌尖上的地域旅行。",
					source: "手机评测周刊",
					publishDate: "2025-05-03",
				},
				{
					id: 4,
					title: "家庭式手工制作的温馨正餐套餐预订火爆",
					summary: "主打家庭手工制作的温馨正餐套餐受热捧，用家常美味传递温暖与关怀。",
					content: "一家主打家庭式餐饮的餐厅推出手工制作正餐套餐，备受消费者青睐。套餐内的菜品均由厨师手工制作，从食材的挑选、处理到烹饪，每一个环节都充满心意。例如，手工现包的饺子、现擀的面条、精心腌制的酱菜等，让食客感受到浓浓的家常味道。此外，餐厅还提供个性化定制服务，可根据家庭聚餐人数、口味偏好调整菜品，搭配温馨的用餐环境，让每一次用餐都充满家的温暖，成为家庭聚餐、朋友聚会的热门选择。",
					source: "生活消费指南",
					publishDate: "2025-05-04",
				},
				{
					id: 5,
					title: "素食主义者钟爱的纯素正餐菜单全新发布",
					summary: "餐厅推出全新纯素正餐菜单，以丰富多样的素食菜品满足素食主义者的味蕾。",
					content: "为满足素食主义者的用餐需求，餐厅推出全新纯素正餐菜单。菜单涵盖凉菜、热菜、汤羹、主食等多个品类，选用优质豆类、菌类、谷物、新鲜果蔬等食材，通过创意烹饪手法，打造出口感丰富、营养均衡的素食佳肴。如用豆制品制作的素肉菜品，口感逼真；用菌类熬制的浓汤，鲜香浓郁。此外，菜单还注重食材的色彩搭配与摆盘艺术，让素食不仅健康，更具视觉美感，吸引了众多素食爱好者前来打卡品尝。",
					source: "健康素食资讯",
					publishDate: "2025-05-05",
				},
				{
					id: 6,
					title: "浪漫烛光晚餐主题的精致正餐套餐限时供应",
					summary: "餐厅推出浪漫烛光晚餐主题正餐套餐，以精致美食与优雅氛围打造专属浪漫时刻。",
					content: "为营造浪漫用餐氛围，餐厅推出烛光晚餐主题正餐套餐。套餐包含精心搭配的前菜、主菜、甜品与饮品，如法式鹅肝、香煎牛排、提拉米苏、红酒等，菜品制作精良，摆盘精致。用餐环境布置温馨浪漫，烛光摇曳，搭配舒缓的音乐，让情侣们在品尝美食的同时，享受甜蜜时光。此外，餐厅还提供专属服务，如拍照留念、鲜花赠送等增值服务，为特殊时刻增添仪式感，成为情侣约会、纪念日庆祝的不二之选。",
					source: "时尚生活杂志",
					publishDate: "2025-05-06",
				},
			];

			// 根据id查找对应的正餐优选
			const dinnerItem = dinnerList.find((dinner) => dinner.id === parseInt(id));
			if (dinnerItem) {
				this.dinner = dinnerItem;
				this.checkIsFavorited(); // 检查该正餐优选是否已被收藏
				this.checkIsLiked(); // 检查该正餐优选是否已被点赞
			}
		},
		methods: {
			onClickAddMyFavorites() {
				if (this.isAddingToLike) {
					return;
				}
				this.isAddingToLike = true;
				if (this.isFavorited) {
					// 如果已收藏，从收藏列表中移除
					const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
					const newFavorites = favorites.filter((fav) => fav.id !== this.dinner.id);
					localStorage.setItem('favorites', JSON.stringify(newFavorites));
					this.isFavorited = false;
					showToast('已取消收藏');
				} else {
					// 如果未收藏，添加到收藏列表
					const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
					favorites.push(this.dinner);
					localStorage.setItem('favorites', JSON.stringify(favorites));
					this.isFavorited = true;
					showToast('已加入收藏');
				}
				this.isAddingToLike = false;
			},
			checkIsFavorited() {
				const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
				this.isFavorited = favorites.some((fav) => fav.id === this.dinner.id);
			},
			onClickLike() {
				if (this.isLiking) {
					return;
				}
				this.isLiking = true;
				if (this.isLiked) {
					// 如果已点赞，取消点赞
					const likedDinner = JSON.parse(localStorage.getItem('likedDinner')) || [];
					const newLikedDinner = likedDinner.filter((dinner) => dinner.id !== this.dinner.id);
					localStorage.setItem('likedDinner', JSON.stringify(newLikedDinner));
					this.isLiked = false;
					showToast('已取消点赞');
				} else {
					// 如果未点赞，添加点赞
					const likedDinner = JSON.parse(localStorage.getItem('likedDinner')) || [];
					likedDinner.push(this.dinner);
					localStorage.setItem('likedDinner', JSON.stringify(likedDinner));
					this.isLiked = true;
					showToast('点赞成功');
				}
				this.isLiking = false;
			},
			checkIsLiked() {
				const likedDinner = JSON.parse(localStorage.getItem('likedDinner')) || [];
				this.isLiked = likedDinner.some((dinner) => dinner.id === this.dinner.id);
			},
		},
	};
</script>

<style scoped>
	/* 定义颜色变量 */
	:root {
		--primary-color: #007bff;
		--secondary-color: #f4f4f4;
		--text-color: #333;
		--background-color: #f8f9fa;
		/* 调整为更浅的灰色背景 */
		--border-color: #e0e0e0;
		--shadow-color: rgba(0, 0, 0, 0.1);
		--button-bg-color: #007bff;
		--button-hover-bg-color: #0062cc;
		--button-active-bg-color: #0056b3;
		--button-text-color: #fff;
		--button-border-radius: 8px;
		--button-padding: 10px 20px;
		--button-font-size: 16px;
		--button-line-height: 1.4;
		--button-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		--button-transition: all 0.3s ease;
	}

	/* 正餐优选详情容器样式 */
	.dinner-detail-container {
		max-width: 800px;
		margin: 20px auto;
		padding: 20px;
		border: 1px solid var(--border-color);
		border-radius: 10px;
		box-shadow: 0 4px 8px var(--shadow-color);
		background-color: var(--background-color);
		font-family: Arial, sans-serif;
		line-height: 1.6;
	}

	/* 正餐优选头部样式 */
	.dinner-header {
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--border-color);
		text-align: center;
	}

	/* 正餐优选标题样式 */
	.dinner-detail-title {
		font-size: 32px;
		color: var(--text-color);
		margin-bottom: 10px;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	}

	/* 正餐优选元数据样式 */
	.dinner-meta {
		font-size: 16px;
		color: #666;
	}

	/* 正餐优选内容样式 */
	.dinner-content {
		font-size: 18px;
		color: var(--text-color);
		line-height: 1.8;
		letter-spacing: 0.5px;
		padding: 0 20px;
	}

	/* 返回按钮、收藏按钮和点赞按钮容器样式 */
	.action-buttons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.back-button {
		display: inline-block;
		padding: var(--button-padding);
		background-color: var(--button-bg-color);
		color: var(--button-text-color);
		text-decoration: none;
		border-radius: var(--button-border-radius);
		transition: var(--button-transition);
		font-size: var(--button-font-size);
		line-height: var(--button-line-height);
		font-weight: bold;
		text-align: center;
		/* 移除默认的box-shadow */
		box-shadow: none;
	}

	.back-button:hover {
		background-color: var(--button-hover-bg-color);
		/* 移除hover时的transform和box-shadow */
		transform: none;
		box-shadow: none;
	}

	.back-button:active {
		background-color: var(--button-active-bg-color);
		transform: none;
		box-shadow: none;
	}

	.right-buttons {
		display: flex;
		gap: 10px;
	}

	.favorite-button,
	.like-button {
		padding: var(--button-padding);
		background-color: var(--button-bg-color);
		color: var(--button-text-color);
		border: none;
		border-radius: var(--button-border-radius);
		transition: var(--button-transition);
		font-size: var(--button-font-size);
		line-height: var(--button-line-height);
		font-weight: bold;
		text-align: center;
		/* 移除默认的box-shadow */
		box-shadow: none;
	}

	.favorite-button:hover,
	.like-button:hover {
		background-color: var(--button-hover-bg-color);
		/* 移除hover时的transform和box-shadow */
		transform: none;
		box-shadow: none;
	}

	.favorite-button:active,
	.like-button:active {
		background-color: var(--button-active-bg-color);
		transform: none;
		box-shadow: none;
	}
</style>